import 'package:flutter/material.dart';
import 'package:hxdj/common/base_page/my_loading_page.dart';
import 'package:hxdj/common/components/my_clip_rect.dart';
import 'package:hxdj/common/components/my_smart_refresher.dart';
import 'package:hxdj/common/my_header_global.dart';
import 'package:hxdj/home/home_viewmodel.dart';
import 'package:hxdj/home/order/order_create_viewmodel.dart';
import 'package:hxdj/home/select_technician/select_technician_viewmodel.dart';
import 'package:provider/provider.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

//选择技师
class SelectTechnicianPage extends StatefulWidget {
  final String templateId;

  static String routeName = "/SelectTechnicianPage";

  const SelectTechnicianPage({super.key, required this.templateId});

  @override
  State<SelectTechnicianPage> createState() => _SelectTechnicianPageState();
}

class _SelectTechnicianPageState extends State<SelectTechnicianPage> {
  //viewModel
  SelectTechnicianViewModel? viewModel;

  //输入框控制器
  TextEditingController editingController = TextEditingController();

  RefreshController refreshController = RefreshController();

  ScrollController scrollController = ScrollController();
  @override
  void initState() {
    super.initState();
  }

  //搜索框
  buildSearchBar() {
    return Container(
      height: 34,
      margin: const EdgeInsets.all(10),
      decoration: BoxDecoration(color: MyColours.materialBg, borderRadius: BorderRadius.circular(17)),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          MyGaps.hGap10,
          const Icon(Icons.search, color: Colors.grey, size: 20),
          MyGaps.hGap10,
          Expanded(
              child: TextField(
                  controller: editingController,
                  style: MyTextStyles.textBlack14,
                  decoration: InputDecoration(
                    hintText: "请输入技师姓名",
                    hintStyle: MyTextStyles.textGray12,
                    border: InputBorder.none, // 隐藏下划线
                    contentPadding: const EdgeInsets.fromLTRB(1, 0.0, 10, 10), // 内容内边距
                    focusedBorder:
                        const OutlineInputBorder(borderSide: BorderSide(width: 0, color: Colors.transparent)),
                    disabledBorder:
                        const OutlineInputBorder(borderSide: BorderSide(width: 0, color: Colors.transparent)),
                    enabledBorder:
                        const OutlineInputBorder(borderSide: BorderSide(width: 0, color: Colors.transparent)),
                  ))),
        ],
      ),
    );
  }

  //附近的技师
  // _buildNearbyTechnician() {
  //   return Expanded(
  //       child: ListView.builder(
  //           padding: EdgeInsets.zero,
  //           itemBuilder: (context, index) {
  //             return const TechnicalItem();
  //           },
  //           itemCount: 100));
  // }

  _buildNearbyTechnician() {
    switch (viewModel?.state) {
      case ViewState.loading:
        return const Expanded(child: MyLoadingWidget());
      default:

        //刷新完成
        refreshController.refreshToIdle();
        refreshController.loadComplete();

        if (!viewModel!.isHave) {
          //无更多数据
          refreshController.loadNoData();
        }

        return Expanded(
          child: MySmartRefresher(
              controller: refreshController,
              scrollController: scrollController,
              noMoreData: !viewModel!.isHave,
              onRefresh: () {
                viewModel?.requestData(isCleanDate: true, tId: widget.templateId);
              },
              onLoading: () {
                viewModel?.requestData(tId: widget.templateId);
              },
              enablePullUp: true,
              enablePullDown: true,
              customChildWidget: ListView.builder(
                  padding: EdgeInsets.only(top: 10.h),
                  itemBuilder: (context, index) {
                    return TechnicalItem(technicianModel: viewModel!.dataList[index]);
                  },
                  itemCount: viewModel?.dataList.length)),
        );
    }
  }

  @override
  Widget build(BuildContext context) {
    return BasePage<SelectTechnicianViewModel>(
        onModelReady: (model) {
          // 页面初始化完成后的回调
          viewModel = model;
          viewModel?.requestData(isCleanDate: true, tId: widget.templateId);
        },
        viewModel: SelectTechnicianViewModel(),
        builder: (BuildContext context, SelectTechnicianViewModel? model, Widget? child) {
          return Scaffold(
              appBar: const MyAppBar(title: "选择技师"),
              body: Container(
                  color: MyColours.bgColor,
                  child: Column(children: [
                    //搜索框
                    // _buildSearchBar(),

                    //附近的技师
                    _buildNearbyTechnician(),
                  ])));
        });
  }
}

class TechnicalItem extends StatelessWidget {
  final NearbyTechnicianModel technicianModel;
  const TechnicalItem({super.key, required this.technicianModel});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(bottom: 10),
      margin: const EdgeInsets.symmetric(horizontal: 15),
      child: Container(
        decoration: BoxDecoration(
            color: MyColours.materialBg,

            //设置四周圆角 角度
            borderRadius: BorderRadius.circular(22)),
        child: Row(
          children: [
            //头像
            Container(
                margin: EdgeInsets.symmetric(vertical: 15.h),
                padding: EdgeInsets.symmetric(horizontal: 10.w),
                child: MyClipRect(
                  imageUrl: technicianModel.logo,
                  width: 80.w,
                  height: 80.w,
                )),

            //info
            Container(
              margin: EdgeInsets.symmetric(horizontal: 10.h),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  //name
                  Text(technicianModel.name ?? "", style: MyTextStyles.textBlackBold16),

                  //time
                  Container(
                      margin: EdgeInsets.only(top: 5.h, bottom: 5.h),
                      decoration: BoxDecoration(
                        color: MyColours.color3DC694,
                        borderRadius: BorderRadius.circular(3),
                      ),
                      padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 4.h),
                      child: Text(technicianModel.aboutDate ?? "",
                          style: TextStyle(color: MyColours.ff269E72, fontSize: 10.sp))),

                  //received count 接单量
                  Text("年接单${technicianModel.yeaOrderNum}",
                      style: const TextStyle(color: MyColours.colorA2A2A2, fontSize: 12))
                ],
              ),
            ),

            //option
            Expanded(
              child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    //位置
                    Container(
                      margin: const EdgeInsets.only(top: 30, bottom: 15),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          //图片
                          MyImage(imageName: "ic_tabbar_se_reservation", width: 10.w),
                          //文字
                          Text(technicianModel.distanceStr ?? "",
                              style: TextStyle(color: MyColours.colorA2A2A2, fontSize: 12.sp))
                          //距离
                        ],
                      ),
                    ),

                    GestureDetector(
                      onTap: () {
                        //返回上一个页面
                        Navigator.pop(context);
                        OrderCreateViewModel orderCreateViewModel =
                            Provider.of<OrderCreateViewModel>(context, listen: false);
                        orderCreateViewModel.selectServiceTechnician(technicianModel);
                      },
                      child: MyBorder(
                        radius: 20.w,
                        backgroundColor: MyColours.appMain,
                        child: Container(
                            padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 5.h),
                            child: Text("选择", style: MyTextStyles.textWhiteBold12)),
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
